<template>
  <div>
    <!-- 遮罩层 -->
    <div
      class="mask-layer"
      v-show="hideright == 0"
      @click.stop='hideClick()'
    ></div>
    <div
      class="AudioSidebar asclo"
      :style="{'right': hideright + 'px'}"
    >
      <div class="as-top">
        <p class="as-tp-tltie">播放列表</p>
        <div class="as-tp-dv">
          <span class="as-tp-text">{{dataList.length}}首歌曲</span>
          <div class="as-tp-icon">
            <el-tooltip
              class="item"
              effect="light"
              content="清空列表"
              placement="top"
            >
              <i
                class="el-icon-delete"
                @click="delArr()"
              ></i>
            </el-tooltip>
          </div>
        </div>
      </div>

      <div
        class="data-list dl-scrllo"
        v-loading="loading"
      >
        <div
          class="dl-item"
          v-for="(item, index) in dataList"
          :key="item.id"
          :class="{'di-item-back-color': indexClass === index}"
        >
          <div class="dl-it-left">
            <p class="dl-it-title">{{item.al.name}}</p>
            <p class="dl-it-name">{{item.ar[0].name}}</p>
          </div>
          <div class="dl-it-right">
            <i
              class="bofang"
              :class="indexClass === index ? 'el-icon-video-pause':'el-icon-caret-right'"
              @click="bofang(index)"
            ></i>
            <el-tooltip
              class="item"
              effect="light"
              content="从列表中删除"
              placement="top"
            >
              <i
                class="el-icon-delete lajitong"
                @click="delindex(index)"
              ></i>
            </el-tooltip>
          </div>
        </div>
      </div>

      <div class="as-bottom">
        <div
          class="as-rong"
          @click="hideClick()"
        >
          <i class="el-icon-s-unfold unfold"></i>
          <span class="as-bm-text">收起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emiton from '../../common/emit/emiton'
import { session } from '@/common/utils'
let hide = true
let issongs = true
export default {
  name: 'AudioSidebar',
  data () {
    return {
      indexClass: '',
      hideright: -350,
      loading: false,
      dataList: []
    }
  },
  created () {
    emiton.$on('emshowhide', data => {
      hide = data
      this.hideright = 0
      // 判断用户是否清空了列表   没清空就加载数据
      if (this.$store.state.isSongsNull) {
        this.getDataList()
      }
    })
  },
  watch: {
    '$store.state.audioIndex' (newValue, oldValue) {
      if (this.$store.state.isSongsNull) {
        this.indexClass = newValue
      }
    }
  },
  methods: {
    // 收起列表
    hideClick () {
      this.hideright = -350
      hide = !hide
      emiton.$emit('embenshowhide', hide)
    },
    // 获取数据
    getDataList () {
      this.loading = true
      const data = session.get('songs')
      this.dataList = data
      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    // 清空列表
    delArr () {
      this.dataList = []
      issongs = !issongs
      this.$store.commit('getisSongsNull', issongs)
    },
    // 播放按钮
    bofang (i) {
      this.indexClass = i
      this.$store.commit('getAudioobj', this.dataList[i])
    },
    delindex(index){
      if(this.indexClass === index){
        this.indexClass = ''
      }
       let data = session.get('songs')
       data.splice(index,1)
       session.set('songs',data)
       this.dataList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2001;
  background-color: rgb(0, 102, 255);
  opacity: 0;
}
.AudioSidebar {
  position: fixed;
  z-index: 2002;
  width: 350px;
  height: 100vh;
  top: 0;
  transition: all 0.5s linear;

  .as-top {
    width: 100%;
    height: 5.6rem;
    padding: 0 7%;

    .as-tp-tltie {
      font-size: 20px;
      color: $textColor;
      font-weight: 700;
      line-height: 3rem;
    }

    .as-tp-dv {
      width: 80%;
      @include dif-juspb-alic;
      color: $textColor;

      .as-tp-text {
        font-size: 14px;
      }

      .el-icon-delete {
        font-size: 20px;
      }
    }
  }

  .data-list {
    width: 100%;
    height: calc(100vh - 10.4rem);

    .dl-item {
      width: 100%;
      height: 75px;
      color: $textColor;
      display: flex;
      padding: 0 7%;

      .dl-it-left {
        width: 63%;
        height: 100%;
        @include dif-juc;
        line-height: 24px;

        .dl-it-title {
          font-size: 16px;
        }

        .dl-it-name {
          font-size: 14px;
        }
      }

      .dl-it-right {
        width: 10%;
        height: 100%;
        @include dif-alc;

        .bofang {
          font-size: 24px;
        }

        .lajitong {
          margin-left: 20px;
        }
      }
    }

    .dl-item:hover {
      background-color: #a0edfd5e;
    }

    .di-item-back-color {
      background-color: #ebfcff;
    }
  }

  .dl-scrllo {
    @include scroll-scss;
    overflow-x: hidden;
  }

  .dl-scrllo::-webkit-scrollbar {
    @include scrollbar;
    background-color: #fff;
  }

  .dl-scrllo::-webkit-scrollbar-track {
    @include scrollbar-track;
  }

  .dl-scrllo::-webkit-scrollbar-thumb {
    @include scrollbar-thumb;
  }

  .as-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4.6rem;
    border-top: 1px solid #e4e7ed;
    padding-left: 70%;

    .as-rong {
      height: 100%;
      @include dif-alc;
      color: $textColor;

      .unfold {
        font-size: 25px;
      }

      .as-bm-text {
        font-size: 14px;
        user-select: none;
      }
    }

    .as-rong:hover {
      color: #15d9f6;
    }
  }
}
.asclo {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 1px solid #ebebeb;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  box-shadow: 5px 0 21px #ccc;
}
</style>